import React, { Component } from 'react'

class SubCpn extends Component {
    render() {
        return (
            <div>
                <span>啦啦</span>
            </div>
        )
    }

    componentWillUnmount() {
        console.log("执行componentWillUnmount的方法");
    }
}

export default class App extends Component {

    constructor() {
        super()

        this.state = {
            counter: 0,
            isShowSub: true
        }
        console.log("执行constructor的方法");
    }

    render() {
        console.log("执行render的方法");
        return (
            <div>
                <h2>{this.state.counter}</h2>
                <button onClick={(e) => this.increase()}>+1</button>
                <hr></hr>
                <button onClick={(e) => this.clickChangeIsShowSub()}>切换</button>
                {this.state.isShowSub && <SubCpn/>}
            </div>
        )
    }

    componentDidMount() {
        console.log("执行componentDidMount的方法");
    }

    componentDidUpdate() {
        console.log("执行componentDidUpdate的方法");
    }

    increase() {
        this.setState({
            counter: this.state.counter+1
        })
    }

    clickChangeIsShowSub() {
        this.setState({
            isShowSub: !this.state.isShowSub
        })
    }
}
